<!-- -->
<template>
  <div class="power">
    <el-container>
      <el-header>
        <!-- <el-button icon="el-icon-delete" type="danger">批量删除</el-button> -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          title="批量删除"
          @click="deleteAll()"
          >批量删除</el-button
        >
        <el-input
          style="width:220px;margin-left:14px;"
          v-model="searchPower"
          placeholder="请输入权限名称"
        ></el-input>
        <el-button
          icon="el-icon-search"
          type="primary"
          style="margin-left:14px;"
          @click="searchPowerList()"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="dialogVisible = true"
          >添加权限</el-button
        >
        <el-button icon="el-icon-refresh" type="success" @click="refresh()">刷新</el-button>

        <el-dialog title="添加权限" :visible.sync="dialogVisible" width="30%">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="addForm"
          >
            <el-form-item label="父级名称">
              <el-row>
                <el-col :span="20">
                  <el-select v-model="addForm.pid">
                    <el-option
                      v-for="item in roleList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="权限名称">
              <el-row>
                <el-col :span="20">
                  <el-input v-model="addForm.name" placeholder="例：Goods" ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="权限别名">
                    <el-row>
                      <el-col :span="20">
                        <el-input v-model="addForm.label" placeholder="例：商品管理" ></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
            <el-form-item label="url地址">
              <el-row>
                <el-col :span="20">
                  <el-input v-model="addForm.url"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPower()">确 定</el-button>
          </span>
        </el-dialog>
      </el-header>
      <el-main>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <span class="total">共有数据 {{ totalSize }} 条</span>
        <el-table :data="tableData" style="width: 100%;margin-top:2%;">
          <el-table-column align="center" width="60">
            <template slot-scope="scope">
              <el-checkbox-group
                v-model="checkedId"
                @change="handleCheckedChange"
              >
                <el-checkbox :key="scope.row.id" :label="scope.row.id">{{
                  ""
                }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="权限名称" prop="name"></el-table-column>
          <el-table-column label="权限别名" prop="label"></el-table-column>
          <el-table-column label="url" prop="url"></el-table-column>
          <!-- <el-table-column label="创建时间" prop="createTime"></el-table-column>

          <el-table-column label="状态" prop="_status"></el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row), (dialogVisible1 = true)
                "
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click.native.prevent="handleDelete(scope.$index, scope.row.id)"
                >删除</el-button
              >
              <el-dialog
                title="修改权限"
                :visible.sync="dialogVisible1"
                width="30%"
              >
                <el-form
                  :label-position="labelPosition"
                  label-width="80px"
                  :model="fixForm"
                >
                  <el-form-item label="父级名称">
                    <el-row>
                      <el-col :span="20">
                        <el-select v-model="fixForm.pid">
                          <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id"
                            auto-complete="on"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="权限名称">
                    <el-row>
                      <el-col :span="20">
                        <el-input v-model="fixForm.name" placeholder="例：Goods" auto-complete="on"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="权限别名">
                    <el-row>
                      <el-col :span="20">
                        <el-input v-model="fixForm.label" placeholder="例：商品管理" auto-complete="on"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="url地址">
                    <el-row>
                      <el-col :span="20">
                        <el-input v-model="fixForm.url" auto-complete="on"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible1 = false">取 消</el-button>
                  <el-button type="primary" @click="fixPower()"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-button @click="pre" :disabled="preBool">上一页</el-button>
        <el-input
          v-model="pageNum"
          readonly="readonly"
          style="width:60px;"
        ></el-input>
        <el-button @click="add" :disabled="addBool">下一页</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Power",
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      labelPosition: "right",
      searchPower: "",
      roleList: [],
      addForm: {
        pid:'',
        label:'',
        name: "",
        url: ""
      },
      fixForm: {
        id: "",
        label:'',
        pid:'',
        name: "",
        url: ""
      },
      tableData: [],
      // 分页
      pageNum: 1,
      addBool: false,
      preBool: true,
      pageSize: 10,
      totalPages: "",
      totalSize: "",
      pages: "",

      // 全选
      checkAll: false,
      checkedId: [],
      isIndeterminate: true
    };
  },
  watch: {
    pageNum: function(Val) {
      if (Val === 1) {
        this.preBool = true;
        this.addBool = false;
      } else if (Val === this.totalPages) {
        this.addBool = true;
        this.preBool = false;
      } else {
        this.preBool = false;
        this.addBool = false;
      }
    }
  },
  created() {
    this.getRole();
    this.getPower();
  },
  components: {},

  filters: {},

  computed: {},

  methods: {
    handleCheckedChange(value = []) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableData.length;
      console.log(this.checkedId);
    },
    handleCheckAllChange(val) {
      this.checkedId = [];
      this.checkAll = val;
      this.isIndeterminate = !val;
      if (this.checkAll) {
        this.tableData.forEach(data => {
          this.checkedId.push(data.id);
        });
      }
      console.log(this.checkedId);
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.fixForm = row;
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm("此操作将永久删除该权限信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deletePower(index, id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      if (this.pageNum < this.totalPages) {
        this.pageNum++;
        this.getPower();
      } else {
        this.addBool = true;
      }
    },
    pre() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.getPower();
      } else {
        this.preBool = true;
      }
    },
    // 成功函数
    Success(index) {
      this.$message.success(index);
    },
    // 失败函数
    Fail(index) {
      this.$message.error(index);
    },
    // 刷新
    refresh() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.searchPower = "";
      this.getPower();
    },
    getRole() {
      this.axios
        .get("/api/privilege")
        .then(res => {
          // console.log("roleres", res.data);
          if (res.data.code === 200) {
            this.roleList = res.data.data.list;
            // console.log('roleList:',this.roleList);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getPower() {
      this.axios
        .put("/api/privilege", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            this.tableData = list.content;
          } else {
            this.totalPages = 0;
            this.totalSize = 0;
            this.tableData = [];
          }
        });
    },
    addPower() {
      if (this.addForm.name === "" || this.addForm.url === ""||this.addForm.pid === ''||this.addForm.label==='') {
        this.Fail("信息不足，添加失败");
      } else {
        console.log(this.addForm);
        this.axios
          .post("/api/privilege", {
            pid:this.addForm.pid,
            label:this.addForm.label,
            name: this.addForm.name,
            url: this.addForm.url
          })
          .then(res => {
            console.log(res.data);
            if (res.data.code == 200) {
              this.Success("添加成功");
              this.getPower();

              this.dialogVisible = false;
            } else {
              this.Fail("添加失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    fixPower() {
      if (this.fixForm.name === "" || this.fixForm.url === ""||this.fixForm.pid === ''||this.fixForm.label==='') {
        this.Fail("信息不足，添加失败");
      } else {
        console.log(this.fixForm);
        this.axios
          .post("/api/privilege", {
            id: this.fixForm.id,
            label:this.fixForm.label,
            pid:this.fixForm.pid,
            name: this.fixForm.name,
            url: this.fixForm.url
          })
          .then(res => {
            console.log(res.data);
            if (res.data.code == 200) {
              this.Success("添加成功");
              this.getPower();

              this.dialogVisible1 = false;
            } else {
              this.Fail("添加失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    deletePower(index, id) {
      this.axios
        .delete("/api/privilege", {
          params: {
            ids: id
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.Success("删除成功");
            this.tableData.splice(index, 1);
            this.getPower();
          } else {
            this.Fail("删除失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteAll() {
      var data = {
        ids: this.checkedId
      };
      var params = this.qs.stringify(data, { indices: false });
      this.axios
        .delete("/api/privilege?" + params)
        .then(response => {
          console.log(response);
          if (response.data.code == 200) {
            this.getPower();
            this.Success("删除成功");
          } else {
            this.Fail("删除失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    searchPowerList(){
      if(this.searchPower!=''){
        this.axios.put('/api/privilege',{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          name:this.searchPower
        }).then(res=>{
          console.log(res.data);
          if(res.data.code === 200){
            let result = res.data.data;
            this.pageSize = result.pageSize;
            this.pageNum = result.pageNum;
            this.tableData = result.content;
          }
        }).catch(error=>{
          console.log(error);
        })
      }
    }
  }
};
</script>
<style scoped>
.total {
  font-size: 14px;
  margin-left: 50px;
  color: #606266;
}
.power {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-header {
  line-height: 60px;
}
.el-main {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-footer {
  line-height: 60px;
  text-align: right;
}
</style>